<template>
  <div class="silder-wrapper">
    <me-loading v-if="!sliders.length" />
    <me-slider
      :data="sliders"
      :direction="direction"
      :loop="loop"
      :interval="interval"
      :pagination="pagination"
      v-else
    >
      <swiper-slide v-for="(item, index) in sliders" :key="index">
        <a :href="item.linkUrl" class="slider-link">
          <img :src="item.picUrl" class="slider-img" />
        </a>
      </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
import MeSlider from "@/base/slider/index";
import MeLoading from "@/base/loading/index";
import { SilderOptions } from "./config";
import { getHomeSlider } from "@/api/home";
export default {
  name: "HomeSlider",
  data() {
    return {
      direction: SilderOptions.direction,
      loop: SilderOptions.loop,
      interval: SilderOptions.interval,
      pagination: SilderOptions.pagination,
      sliders: []
    };
  },
  components: {
    MeSlider,
    MeLoading
  },
  methods: {
    update() {
      return this.getSliders();
    },

    getSliders() {
      return getHomeSlider().then(data => {
        // console.log(data);
        this.sliders = data;
      });
    }
  },
  created() {
    this.getSliders();
  }
};
</script>

<style lang="scss" scoped>
.silder-wrapper {
  height: 183px;
}
.slider-link {
  display: block;
}
.slider-img {
  width: 100%;
  height: 100%;
}
</style>
